<!-- 建档率监测 -->
<template>
  <div class="mod-config">
      <el-divider content-position="left">查询条件</el-divider>
      <el-form label-width="80px">
        <el-row class="bg-row">
          <el-form-item label="统计类型">
            <el-select v-model="dataForm.classify">
              <el-option value="1" label="视力分布情况"></el-option>
              <el-option value="2" label="容错率"></el-option>
              <el-option value="3" label="戴镜率"></el-option>
              <el-option value="4" label="BMI"></el-option>
              <el-option value="5" label="三级预警"></el-option>
              <el-option value="6" label="视力不良率"></el-option>
              <el-option value="7" label="近视率"></el-option>
            </el-select>
          </el-form-item>
        </el-row>
        <el-row class="bg-row">
          <el-col :span="24">
            <el-form-item label="分类">
              <el-select v-model="dataForm.mode">
                <el-option value="1" label="性别"></el-option>
                <el-option value="2" label="年级"></el-option>
                <el-option value="3" label="区域"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row class="bg-row">
          <el-col :span="12">
            <el-form-item label="学年">
                <el-col :span="11">
                  <el-date-picker type="date" placeholder="选择日期" v-model="dataForm.beginTime" value-format="yyyy-MM-dd" style="width: 100%;"></el-date-picker>
                </el-col>
                <el-col class="line" :span="2" style="text-align: center;">至</el-col>
                <el-col :span="11">
                  <el-date-picker type="date" placeholder="选择日期" v-model="dataForm.endTime" value-format="yyyy-MM-dd" style="width: 100%;"></el-date-picker>
                </el-col>
              </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="区域">
              <el-select style="width: 140px;" filterable default-first-option clearable v-model="dataForm.province" placeholder="请选择" @change="getCitys">
                <el-option v-for="item in provinces" :key="item.id" :label="item.regionName" :value="item.id">
                  <span style="float: left">{{ item.regionName }}</span>
                  <span style="float: right; color: #8492a6; font-size: 13px">{{ item.id }}</span>
                </el-option>
              </el-select>
              <el-select style="width: 140px;" filterable default-first-option clearable v-model="dataForm.city" placeholder="请选择" @change="getAreas">
                <el-option v-for="item in citys" :key="item.id" :label="item.regionName" :value="item.id">
                  <span style="float: left">{{ item.regionName }}</span>
                  <span style="float: right; color: #8492a6; font-size: 13px">{{ item.id }}</span>
                </el-option>
              </el-select>
              <el-select style="width: 140px;" filterable default-first-option clearable v-model="dataForm.area" placeholder="请选择">
                <el-option v-for="item in areas" :key="item.id" :label="item.regionName" :value="item.id">
                  <span style="float: left">{{ item.regionName }}</span>
                  <span style="float: right; color: #8492a6; font-size: 13px">{{ item.id }}</span>
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row class="bg-row">
          <el-col :span="6">
            <el-form-item label="学校类型">
              <el-select style="width: 140px;" filterable default-first-option clearable v-model="dataForm.schoolType" placeholder="请选择">
                <el-option v-for="item in typeOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row class="bg-row">
          <el-col :span="6">
            <el-form-item label="学校">
              <el-input v-model="dataForm.schoolName" readonly>
                <el-button slot="append" @click="openDialog('school')">选择</el-button>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="年级">
              <el-input v-model="dataForm.gradeName" readonly>
                <el-button slot="append" @click="openDialog('grade')">选择</el-button>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="班级">
              <el-input v-model="dataForm.className" readonly>
                <el-button slot="append" @click="openDialog('class')">选择</el-button>
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row style="margin-top: 10px;">
          <el-form-item label-width="5px">
            <el-link  :href="printUrl" target="_blank" type="primary"><el-button type="primary" @click="getWorkParams" v-prevent-re-click>查 询</el-button></el-link>
            <el-button type="info" icon="el-icon-delete" style="margin-left: 15px;">清 空</el-button>
          </el-form-item>
        </el-row>
      </el-form>
    <search-school v-if="schoolVisible" ref="schoolDialog" @refreshForm="getSchoolData"></search-school>
    <search-grade v-if="gradeVisible" ref="gradeDialog"  @refreshForm="getGradeData"></search-grade>
    <search-class v-if="classVisible" ref="classDialog" @refreshForm="getClassData"></search-class>
  </div>
</template>

<script>
  let params = '/work/saleByUser.cpt'
  import { filterParams, getDateFormat } from '@/util/tools'
  import { getListByParentId } from '@/api/admin/region'
  import { fetchSchoolList } from '@/api/pvm/school'
  import { remote } from '@/api/admin/dict'
  import { mapGetters } from 'Vuex'

  import SearchSchool from '../../teacher/components/SearchSchool'
  import SearchGrade from '../../class/components/SearchGrade'
  import SearchClass from '../../checkdata/SearchClass'
  export default {
      data () {
        return {
          printUrl: '',
          provinces: [],
          citys: [],
          areas: [],
          typeOptions: [],
          dataForm: {
            classify: '1',    //  查询分类
            mode: '2',        //  查询方式
            beginTime: '',    //  查询开始时间
            endTime: '',      //  查询结束时间
            province: '',
            city: '',
            area: '',
            schoolType: '',
          },
          schoolVisible: false,
          gradeVisible: false,
          classVisible: false
        }
      },
      components: {
        SearchSchool,
        SearchGrade,
        SearchClass
      },
      computed: {
        ...mapGetters(['userInfo','bizData'])
      },
      created() {
        this.dataForm.beginTime = getDateFormat(new Date())
        this.dataForm.endTime = getDateFormat(new Date())
        this.getProvinces()
        this.getTypeOptions()
      },
      methods:{
        getWorkParams() {
          if(this.spreadData.classify == '1' && this.spreadData.mode == '2'){
            params = '/work/saleByUser.cpt'
          }else if(this.spreadData.classify == '1' && this.spreadData.mode == '1'){
            params = '/work/saleByDept.cpt'
          }else if(this.spreadData.classify == '3' && this.spreadData.mode =='2'){
            params = '/work/saleByOptometry.cpt'
          }else if(this.spreadData.classify == '3' && this.spreadData.mode =='1'){
            params = '/work/saleByOptometryDept.cpt'
          }
            if(this.spreadData.deptId){
                this.dataForm.deptId=this.spreadData.deptId
            }
          let data = filterParams(this.dataForm)
          let parameter = ''
          for(let key in data){
            parameter += '&' + key + '=' + this.dataForm[key]
          }
          // let parameter = '&deptId='+this.dataForm.deptId + '&beginTime='+this.dataForm.beginTime+ '&endTime='+this.dataForm.endTime
          //let frUrl = "http://localhost:8075/webroot/decision/view/report?viewlet="
          //this.printUrl = frUrl + params + parameter
          this.printUrl = this.bizData.printUrl + params + parameter
        },

        // 获取省级列表
        getProvinces(){
          var parentId = '86';
          getListByParentId(parentId).then(response => {
            if(response.data.code == '0'){
              this.provinces = response.data.data
            }else{
              this.$message.error(response.data.msg)
            }
          }).catch(() => {
            alert("省级地址出错了，请联系管理员")
          });
        },
        // 获取市级列表
        getCitys(id){
          this.dataForm.city = ''
          this.dataForm.area = ''
          this.citys = []
          this.areas = []
          this.$set(this.dataForm,'city','')
          this.$set(this.dataForm,'area','')
          if(id){
            getListByParentId(id).then(response => {
              if(response.data.code == '0'){
                this.citys = response.data.data
              }else{
                this.$message.error(response.data.msg)
              }
            }).catch(() => {
              alert("市级地址出错了，请联系管理员")
            })
          }
        },
        // 获取区县级列表
        getAreas(id){
          this.areas = []
          this.$set(this.dataForm,'area','')
          if(id){
            getListByParentId(id).then(response => {
              if(response.data.code == '0'){
                this.areas = response.data.data
              }else{
                this.$message.error(response.data.msg)
              }
            }).catch(() => {
              alert("县级地址出错了，请联系管理员")
            });
          }
        },
        // 获取学校类型列表
        getTypeOptions(){
          remote('school_type').then(response => {
            if(response.data.code == '0'){
              let responseData = response.data.data
              let list = []
              responseData.forEach(item => {
                list.push({label: item.label, value: item.value*1})
              })
              this.typeOptions = [...list]
            }else{
              this.$message.error(response.data.msg)
            }
          })
        },
        // 打开弹窗
        openDialog(type){
          if(type == 'school'){
            let form = {
              province: this.dataForm.province,
              city: this.dataForm.city,
              area: this.dataForm.area,
              schoolType: this.dataForm.schoolType
            }
            this.schoolVisible = true
            this.$nextTick(() => {
              this.$refs.schoolDialog.init(JSON.stringify(form))
            })
          }else if(type == 'grade'){
            if(this.dataForm.schoolId){
              let form = {
                schoolType: this.dataForm.schoolType
              }
              this.gradeVisible = true
              this.$nextTick(() => {
                this.$refs.gradeDialog.init(JSON.stringify(form))
              })
            }else{
              this.$message.warning('请先选择学校')
            }
          }else if(type == 'class'){
            if(this.dataForm.gradeId){
              let form = {
                schoolId: this.dataForm.schoolId,
                schoolName: this.dataForm.schoolName,
                gradeId: this.dataForm.gradeId,
                gradeName: this.dataForm.gradeName
              }
              this.classVisible = true
              this.$nextTick(() => {
                this.$refs.classDialog.init(JSON.stringify(form))
              })
            }else{
              this.$message.warning('请先选择学校年级')
            }
          }
        },
        getSchoolData(val){
          this.$set(this.dataForm,'schoolId',val.id)
          this.$set(this.dataForm,'schoolName',val.schoolName)
          this.$set(this.dataForm,'schoolType',val.schoolType)
        },
        getGradeData(val){
          this.$set(this.dataForm,'gradeId',val.id)
          this.$set(this.dataForm,'gradeName',val.gradeName)
        },
        getClassData(val){
          this.$set(this.dataForm,'classId',val.id)
          this.$set(this.dataForm,'className',val.className)
        },
      }
    }
</script>
<style lang="scss" scoped>
  .bg-row {
    // background-color: #9ec0b0;
    padding-right: 15px;
    padding-top: 5px;
    margin-bottom: 2px;
  }
</style>
